<template>
	<el-row class="brand-user-list" :gutter="20">
		<el-col v-for="item in aduit_users" :key="item.id" :span="8">
			<div class="item">
				<img v-vImg="item.headimg" alt="">
				<div class="info">
					<h1>{{item.real_name}}</h1>
					<span>{{item.department_name}}</span>
					<span>{{item.tel}}</span>
				</div>
				<div class="delete-triangle-btn" @click="_handleDeleteUser"></div>
				<i class="delete-btn el-icon-delete" @click="_handleDeleteUser"></i>
			</div>
			<el-dialog class="delete-dialog-user-list" :title="'删除'+ userType +'人员'" :visible.sync="deleteDialog" size="tiny">
				<i class="el-icon-information jinggao"></i>
				<span>此操作将永久删除该{{userType}}人员，是否继续？</span>
				<span slot="footer" class="dialog-footer">
	        			<el-button @click="deleteDialog = false">取 消</el-button>
	        			<el-button type="primary" @click="deleteAuditUser(item)">确 定</el-button>
	      		</span>
			</el-dialog>
		</el-col>
	</el-row>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		props: {
			isAduit: {
				required: true,
				type: Boolean,
				auditObj:{
					node_id:null,
					users:[],
					type:'delete'
				}
			}
		},

		data: () => ({
			deleteDialog: false,
		}),

		created() {},

		mounted() {},

		computed: {
			...mapGetters('brand', ['aduit_users','delectAduitUser']),
			userType() {
				return this.isAduit ? '审核' : '销售'
			}
		},

		methods: {
			// 删除用户
			_handleDeleteUser() {
				this.deleteDialog = true
			},
			deleteAuditUser(item){
				this.deleteDialog = false
				this.auditObj.node_id=item.depart_node_id
				this.auditObj.users.push(item.id)
				this.delectAduitUser(this.auditObj)
			}
		}
	}
</script>

<style lang="scss">
	.brand-user-list {
		.item {
			position: relative;
			height: 90px;
			background-color: #fff;
			margin-bottom: 20px;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			padding: 0 30px;
			border: 1px solid #e0e6ed;
			img {
				height: 50px;
				width: 50px;
				border-radius: 25px;
				margin-right: 20px;
			}
			.info {
				h1 {
					font-size: 14px;
					margin-top: 0;
					margin-bottom: 12px;
					color: #475669;
					letter-spacing: 0;
				}
				span {
					font-size: 13px;
					color: #8492a6;
					letter-spacing: 0;
				}
			}
			>.delete-triangle-btn {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 0;
				height: 0;
				border-bottom: 30px solid #e0e6ed;
				border-left: 30px solid transparent;
				cursor: pointer;
			}
			>.delete-btn {
				position: absolute;
				right: 3px;
				bottom: 3px;
				font-size: 12px;
				color: #fff;
				cursor: pointer;
			}
		}
		.delete-dialog-user-list {
			.el-dialog__header {
				padding: 20px;
				background: #f9fafc;
				border-radius: 2px 2px 0 0;
			}
			.el-dialog__body {
				padding: 80px 0;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: center;
				.jinggao {
					color: #f7ba2a;
					font-size: 40px;
				}
			}
			.el-dialog__footer {
				padding: 20px;
				background: #f9fafc;
				border-radius: 0 0 2px 2px;
				text-align: center;
			}
		}
	}
</style>